<template>
    <div class="alarm-container">
        <div class="left-menu-box" >
            <baseDrawer :title="$t('equipmentType')" @changeShow='changeShow' >
                <div class="selectItem" v-for="(item,index) in deviceTypeData" :id="item.value" :key="index" :class="activeClass ==index?'active':''">
                    <span @click="changeDeviceType(item.value,index)">{{item.code}}</span>
                </div>
            </baseDrawer>
        </div>
        <div class="right-menu-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <div class="search-box">
                <div class="search-box-sub">
                <span class="lable-text">{{$t('alarmpush.alarmLevel')}}</span>
                <el-select v-model="searchData.alarmType" filterable clearable :placeholder="$t('pleaseSelect')" @change="query">
                    <el-option
                    v-for="item in alarmLevelData"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
                </div>
                <div class="search-box-sub">
                <span class="lable-text">{{$t('alarmpush.alarmType')}}</span>
                <el-select v-model="searchData.alarmLevel" filterable clearable :placeholder="$t('pleaseSelect')" @change="query">
                    <el-option
                    v-for="item in alarmTypeData"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
                </div>
                <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
                <el-button type="" @click="exportData" >{{$t('export')}}</el-button>
                <el-button type=""  @click="()=>{$store.commit('setVisibleShow',true)}" >{{$t('import')}}</el-button>
                <el-button type="" @click="download" >{{$t('download.templates')}}</el-button>
                </div>
            </div>
            <div class="button-box">
                <el-button type="primary" icon='el-icon-plus' @click="()=>{$store.commit('setVisibleAdd',true)}">{{$t('add')}}</el-button>
                <el-popconfirm
                    :title="$t('index.delete_confirm')+'?'"
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
                    @confirm='deleteBatch()'
                >
                    <el-button type="" slot="reference" icon='el-icon-delete'>{{$t('delete')}}</el-button>
                </el-popconfirm>
            </div>
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
                <template #alarmType="{data}">
                {{UtilsFun.getValueByCode(alarmTypeData,data.alarmType)}}
                </template>
                <template #deviceType="{data}">
                {{UtilsFun.getValueByCode(deviceTypeData,data.deviceType)}}
                </template>
                <template #alarmLevel="{data}">
                {{UtilsFun.getValueByCode(alarmLevelData,data.alarmLevel)}}
                </template>
                <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit" :title="$t('edit')" @click='editUsers(data)'></el-button>
                    <el-popconfirm
                        :title="$t('index.delete_item_confirm')+'?'"
                        @confirm='deleteSub(data.ids)'
                    >
                        <el-button type="danger" slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </div>
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            <addModal :deviceType='deviceType' :deviceTypeData="deviceTypeData" :alarmTypeData='alarmTypeData' :alarmLevelData='alarmLevelData' @uploadPage='uploadPage' v-if='visibleAdd'></addModal>
            <editModal :deviceType='deviceType' :deviceTypeData="deviceTypeData" :alarmTypeData='alarmTypeData' :alarmLevelData='alarmLevelData' :rowData='rowDataList' @uploadPage='uploadPage'></editModal>
            <importModal :deviceType='deviceType' :deviceTypeData="deviceTypeData" @uploadPage='uploadPage'></importModal>
        </div>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import baseDrawer from '../../../components/common/baseDrawer'
import addModal from './add.vue'
import editModal from './edit.vue'
import importModal from './import.vue'
export default {
    components: {
        baseTable,
        baseDrawer,
        addModal,
        editModal,
        importModal
    },
    props: {

    },
    data() {
        return {
            deviceType:'',
            searchData:{
                alarmType:'',
                alarmLevel:''
            },
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            activeClass:0,
            deviceTypeData:[],
            alarmTypeData:[],
            alarmLevelData:[],
            changeShowFlag:true,
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarmpush.alarmCode'),
                value: 'alarmCode',
            },{
                title: this.$t('alarmpush.alarmName'),
                value: 'alarmName'
            },{
                title: this.$t('alarmpush.alarmType'),
                value: 'alarmType',
                slot: 'alarmType'
            },{
                title: this.$t('equipmentType'),
                value: 'deviceType',
                slot: 'deviceType'
            },{
                title: this.$t('alarmpush.alarmLevel'),
                value: 'alarmLevel',
                slot: 'alarmLevel'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
            langNew:''
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        },
        // lang(){
        //     return localStorage.getItem('lang') || 'zh_CN'
        // }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch();
    },
    methods: {
        changeShow(flag){
            this.changeShowFlag = flag
        },
        changeDeviceType(val,index){
            this.deviceType=val
            this.activeClass=index
            this.query()
        },
        async deleteSub(ids){
            let res = await this.API.deleteAlarmDefine({
                ids:ids
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'))
            }else{
                this.$message.error(this.$t('index.control_fail'))
            }
            this.initTable()
        },
        async deleteBatch(){
            if(this.selectDatalist.length>0){
                let ids = this.selectDatalist.map(item => {
                    return item.ids
                })
                let res = await this.API.deleteAlarmDefine({
                    ids
                })
                if(res.success){
                    this.$message.success(this.$t('index.control_success'))
                }else{
                    this.$message.error(this.$t('index.control_fail'))
                }
                this.initTable()
            }else{
                this.$message.error(this.$t('index.delete_select'))
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ALARM_LEVEL,INVERTER_TYPES,ALARM_TYPES',
            })
            this.alarmTypeData = res.ALARM_TYPES
            this.alarmLevelData = res.ALARM_LEVEL
            this.deviceTypeData = res.INVERTER_TYPES
            this.deviceType=this.deviceTypeData[0].value
            this.initTable()
        },
        async initTable(){
            this.loading = true
            let res = await this.API.getPageInAlarmDefine({
                size: this.size,
                current: this.current,
                deviceType:this.deviceType,
                ...this.searchData
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        editUsers(data){
            this.$store.commit('setVisibleEdit',true)
            this.rowDataList = data
            console.log(this.rowDataList)
        },
        uploadPage(){
            this.initTable()
        },
        returnTypeCode(val){
            let res
            this.typeList.forEach(item=>{
                if(val==item.value){
                    res = item.code
                }
            })
            return res
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
        exportData(){
            let params={
                deviceType:this.deviceType||this.deviceTypeData[0].value,
                alarmLevel:this.searchData.alarmLevel,
                alarmType:this.searchData.alarmType
            }
            this.comm.windowOpen('/alarmPush/AlarmExport',params)
        },
        download(){
            this.comm.windowOpen('/resource/files/alarm_template.xls')
        }
    },
};
</script>

<style lang="less">
.alarm-container{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    font-size: 14px;
    .right-menu-box{
        flex: 1;
    }
    .selectItem{
        span{
            display:block;
            padding: 5px;
            font-size: 13px;
        }
        &:hover,&.active{
            background:#FEA429;
            cursor: pointer;
        }
    }
}

</style>
